import React, { useEffect, useState } from "react";
import "./TodoList.css";
import TodoHeader from "./TodoHeader/TodoHeader";
import TodoMain from "./TodoMain/TodoMain";
import TodoFooter from "./TodoFooter/TodoFooter";
//导入 shortid
import shortid from "shortid";
import axios from "axios";
//导入 axios 的实例
import request from "../../utils/request";

export default function TodoList() {
  //声明状态表示任务的列表
  let [todos, setTodos] = useState([]);

  //新增任务
  let addTodo = async (title) => {
    try {
      //发送 AJAX 请求新增任务  {}  ''
      let data = await request.post("/todos", {
        title: title,
        done: false,
      });

      //更新状态
      setTodos([...todos, data]);
    } catch (e) {
      console.log('新增失败!~~');
    }
  };

  //改变某个任务的完成状态
  let checkTodo = async (id, done) => {
    //发送请求
    await request.patch(`/todos/${id}`, {done})

    //修改某个任务的状态
    let newTodos = todos.map((item) => {
      //判断任务的 id
      if (item.id === id) {
        item.done = done;
      }
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //删除某个任务
  let removeTodo = async (id) => {
    //发送请求删除指定 id 的任务
    await request.delete(`/todos/${id}`);
    //filter 过滤
    let newTodos = todos.filter((item) => {
      //判断
      if (item.id === id) return false;
      return true;
    });
    //更新状态
    setTodos(newTodos);
  };

  //批量的更新任务的完成状态
  let checkAllTodo = (done) => {
    //遍历数组, 修改任务的完成状态值
    let newTodos = todos.map((item) => {
      //修改任务的完成状态
      item.done = done;
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //批量移除已经完成的任务
  let batchRemoveTodos = () => {
    //生成新的数组
    let newTodos = todos.filter((item) => item.done === false);
    //更新状态
    setTodos(newTodos);
  };

  //组件挂载完成的操作
  useEffect(() => {
    //声明函数, 获取数据
    let getData = async () => {
      //async 和 await
      let data = await request.get("/todos");
      //更新状态 相当于 then 方法成功的回调
      setTodos(data);
    };
    getData();
  }, []);

  //测试
  useEffect(() => {
    //测试新增功能
    // addTodo('测试一下任务');
    //测试改变完成状态功能
    // checkTodo(1, true);
    // removeTodo(2)
    //测试批量的更新
    // checkAllTodo(false);
    //测试批量的移除
    // batchRemoveTodos();
  }, []);

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain todos={todos} checkTodo={checkTodo} removeTodo={removeTodo} />
        <TodoFooter
          todos={todos}
          checkAllTodo={checkAllTodo}
          batchRemoveTodos={batchRemoveTodos}
        />
      </div>
    </div>
  );
}

// TodoMain({todos: todos})
